<!DOCTYPE html>
<html>
    <head>
        <title>个人主页</title>
        <meta charset="utf-8">
        <style >
            body{
                margin: 0;
                margin-bottom: 20px;
            }
            #header{
                width: 100%;
                height: 300px;
                /*设置背景图片*/
                background-image: url(beijing.jpg);
                background-size: 100% ;
                background-position: 50% 50%;
                position: fixed;
                vertical-align: bottom;
                top: 0;
              
               
            }
            #header-inner{
                 text-align: right;
                position: absolute;
                bottom: 0;
                right: 0;
            }
            #header-inner a{
               line-height: 70px;
               height: 70px;
                text-decoration: none;
                display: inline-block;
                font-size: 30px;
                
            }
            #header-inner a:hover{
                background-color: cadetblue;
             }
            
            #container{
                width: 1000px;
                margin-left: 450px;
                margin-top: 300px;
           
            
                
            }
            /*img标签如果不设置宽高，那么宽高等于所显示的图片的宽高，如果同时设置了宽高，那么就等于设置了宽高，如果只设置了宽度，那么高度会随之等比例缩放，如果只设置了高度，那么宽度会随之缩放*/
            .pic{
                /*宽度设置为100%,表示和父元素等宽*/
                width: 100%;

            }
            
            P{
                font-size: 20px;
                text-indent: 2em;
                font-family:微软雅黑;
                font-weight: normal;
                line-height: 35px;
                
            }
            #bottom{
                text-align: center;
                font-family: 微软雅黑;
                font-size: 14px;
                
            }
            #myclassmatebg{
                background-image: url(pic.jpg);
                background-position: 50% 50%;
                height: 600px;
                position: relative;
                z-index: -1;
            }
            #first-pic{
                width:250px;
                height: 250px;
                border-radius: 50%; 
                position: absolute;
                left: 20px;
                top: 20px;
                
            }
            #second-pic{
                width: 250px;
                height: 250px;
                 border-radius: 50%;
                  position: absolute; 
                  left: 400px;
                  bottom: 40px;
               
            }
            #third-pic{
                width: 250px;
                height: 250px;
                 border-radius: 50%; 
                 position: absolute; 
                 right: 50px;
                 top: 20px;
                
            }
            </style>
    </head>
    <body>
        <div id="header">
            <div id="header-inner">
                <a href="#myintro">个人简介|</a>
                <a href="#myschool">我的学校|</a>
                <a href="#myhometown">我的家乡|</a>
                <a href="#myfront">前端开发|</a>
                <a href="#myh5">h5资讯|</a>
                <a href="#myclassmate">我的同学</a>
            </div>
        </div>
        <div id="container">
            <div>
                <h1 id="myintro">个人简介</h1>
                <p>姓名：闫俊丽&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;年龄：保密</p>
                <p>班级：H5-30&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;家乡：河南开封</p>
                <p>性别：女&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;专业：计算机</p>
                <p>爱好：play&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;毕业学校：河南科技学院</p>
                <p>学历：本科&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;现居地：河南省郑州市金宝塔宿舍 </p>
            </div>
            <div>
                <h1 id="myschool">我的学校</h1>
                <p >河南科技学院（Henan Institute of Science and Technology）是一所省属普通本科院校。学校始建于1939年，前身为中国共产党早期创建的延安自然科学院大学部生物系，历经北方大学农学院、华北大学农学院、华北大学农学院长治分院、北京农业大学长治分校、平原农学院、百泉农业专科学校、河南职业技术师范学院等时期。2004年5月，经教育部批准，更名为河南科技学院。
                    学校地处中原名城新乡市，占地面积2478亩，校舍面积62万平方米。图书馆各类文献资源总量达269万册，中外文期刊1500余种。学校设19个教学学院，60个本科专业，目前有各类在校生49000余人，其中全日制在校生34000余人，成人教育学生15000余人，形成了以本科教育为主体，兼有研究生教育、高职教育、成人高等教育等多层次、多科性的办学格局。</p>
                <img  class="pic" src="xuexiao.jpg" alt="">
            </div>
            <div>
                <h1 id="myhometown">我的家乡</h1>
                <p>开封，古称老丘、大梁、陈留、东京、汴京、汴梁等，简称汴，中国六大古都之一，是国务院首批公布的国家历史文化名城，是河南省地级市，地处中原腹地、河南省东部、黄河下游南岸之滨，西与省会郑州市毗邻，东与商丘市相连，南接许昌市和周口市，北依黄河与新乡市相望，为河南省新兴副中心城市，国家区域中心城市，中原城市群核心发展区城市，郑州大都市区核心成员城市，开封自贸区也是中国（河南）自由贸易试验区三大片区之一。
                </p>
                <img src="k2.jpg" alt="" class="pic">
                <p>开封承载着厚重的历史文化。具有“文物遗存丰富、城市格局悠久、古城风貌浓郁、北方水城独特”四大特色。开封迄今已有4100余年的建城史和建都史，先后有夏朝，春秋战国时期魏国，五代后梁、后晋、后汉、后周，辽朝，北宋和金朝相继在开封定都，素有八朝古都之称，是世界上唯一一座城市中轴线从未变动的都城，城摞城遗址在世界考古史和都城史上少有。北宋都城东京开封城更是当时世界第一大城市，有着“琪树明霞五凤楼，夷门自古帝王州”、“汴京富丽天下无”之美誉，开封是清明上河图原创地，享有“东京梦华”之美誉。</p>
                <img src="k3.jpg" alt="" class="pic">
                <p>开封是著名的戏曲之乡，中国第一大地方剧种豫剧发源于此。开封市内五湖四河环绕分布，素有“北方水城”之称。开封人文景观和自然风光交相辉映，是中国优秀旅游城市、中国菊花名城、中国书法名城，拥有国家5A、4A级旅游景区8家，全国重点文物保护单位19处，每年春天举办的中国开封清明文化节、秋天举办的中国开封菊花文化节，吸引了众多海内外游客。</p>
                <img src="k4.jpg" alt="" class="pic">
            </div>
            <div>
                <h1 id="myfront">前端开发</h1>
                <p>2005年以后，互联网进入Web2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，这方面的专业人才近几年来备受青睐。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。</p>
                <img src="q1.jpg" alt="" class="pic">
            </div>
            <div>
                <h1 id="myh5">h5资讯</h1>
                <p>7月3日，中国电信宣布将于8月1日在部分重点城市正式推出“天翼4G+”服务，下行峰值速率可达300Mbps。7月16日，中国制造的世界首台6GHz以下5G低频样机亮相2015世界移动大会，网络速率可达10Gbps，下载一部高清影片用时不超过1秒。随着移动终端和移动网络的更新升级，以手机为中心的产业链初步形成。7月份以来，从微信团购到延误险、加班险的出炉，险企对于“移动保险”的布局已崭露头角。不过，对于移动端的开发，不同保险公司却有着截然不同的思路。比如，平安集团开发了不同服务类型的手机App，截至目前已经有40余种相关的手机软件。另一些公司，则动起了“朋友圈”的脑筋，开出月薪3万元的价格招聘微信开发方面的人才。业内人士表示，宁可高薪招人，险企也不愿自己培养相关的技术人才。</p>
                <img src="q2.jpg" alt="" class="pic"> 
            </div>        
           <div>
                <h1 id="myclassmate">我的同学</h1>
                <div id="myclassmatebg">
                <img src="pic.png" alt="" id="first-pic">
                <img src="pic.png" alt="" id="second-pic">
                <img src="pic.png" alt="" id="third-pic">
        </div>
            
            
        </div>
            <div id="bottom">关于我|联系我|相关资讯|友情链接<br>版权所有 豫ICP备10202274-4号 豫B2-20080005 
        </div>

    </body>
</html>